<template>
  <div class="bpmn-de">
    <bpmn-toolbar v-if="getEditorConfig.toolbar" @save="save" />
    <div class="main-content">
      <bpmn-designer :xml.sync="xmlString" />
      <bpmn-panel v-if="getEditorConfig.penalMode === 'custom'" />
      <div v-else class="camunda-panel" id="camunda-panel"></div>
    </div>

    <bpmn-settings />
    <bpmn-context-menu />
  </div>
</template>

<script>
import BpmnDesigner from "@/components/BpmnProcessDesigner/packages/components/Designer/index.vue";
import BpmnSettings from "@/components/BpmnProcessDesigner/packages/components/Settings/index.vue";
import { mapGetters } from "vuex";
import BpmnToolbar from "@/components/BpmnProcessDesigner/packages/components/Toolbar/index.vue";
import BpmnContextMenu from "@/components/BpmnProcessDesigner/packages/components/ContextMenu/ContextMenu.vue";
import BpmnPanel from "@/components/BpmnProcessDesigner/packages/components/Panel/index.vue";
import {getBpmModel, updateBpmModel} from "@/api/flowable/bpmModel";
import { getModeler } from "@/components/BpmnProcessDesigner/packages/bpmn-utils/BpmnDesignerUtils";
export default {
  name: "BpmnModelDesigner",
  components: { BpmnPanel, BpmnContextMenu, BpmnToolbar, BpmnSettings, BpmnDesigner },
  provide(){
   return{
     elementFatherId:this.$route.query.modelKey,
     elementFatherName:this.$route.query.modelName
   }
  },
  data() {
    return {
      xmlString: undefined,
      form:{
        modelId: undefined,
        modelName: undefined,
        modelKey: undefined,
        bpmnXml: undefined
      }
    };
  },
  computed: {
    ...mapGetters(["getEditorConfig"])
  },
  mounted() {
    document.body.addEventListener("contextmenu", function (ev) {
      ev.preventDefault();
    });
    getBpmModel(this.$route.query.id).then((res)=>{
      this.form = res.data;
      getModeler() && getModeler().importXML(res.data.bpmnXml);
      console.log(this.xmlString)
    })
  },
  methods:{
    save(xml){
      this.$confirm('是否确认修改流程模型?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.bpmnXml = xml;
        updateBpmModel(this.form).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.push({
            path:'/bpm/bpmModel'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>
<style scoped>
.bpmn-de {
  width: calc(100vw - 200px);
  height: calc(100vh - 84px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
</style>
